<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width">
    <meta http-equiv="Cache-Control" content="no-transform"/>
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <title>3D旋转立方体演示 &#8211; WEB骇客</title>
    <style>/*************** ANIMATIONS ***************/
    @-webkit-keyframes spin {
        from {
            -webkit-transform: rotateY(0);
        }
        to {
            -webkit-transform: rotateY(360deg);
        }
    }

    @-ms-keyframes spin {
        from {
            ms-transform: rotateY(0);
        }
        to {
            ms-transform: rotateY(360deg);
        }
    }

    @keyframes spin {
        from {
            transform: rotateY(0);
        }
        to {
            transform: rotateY(360deg);
        }
    }

    @-webkit-keyframes spin-vertical {
        from {
            -webkit-transform: rotateX(0);
        }
        to {
            -webkit-transform: rotateX(-360deg);
        }
    }

    @-ms-keyframes spin-vertical {
        from {
            ms-transform: rotateX(0);
        }
        to {
            ms-transform: rotateX(-360deg);
        }
    }

    @keyframes spin-vertical {
        from {
            transform: rotateX(0);
        }
        to {
            transform: rotateX(-360deg);
        }
    }

    /*************** STANDARD CUBE ***************/
    .cube-wrap {
        -webkit-perspective: 800px;
        -webkit-perspective-origin: 50% 100px;

        -moz-perspective: 800px;
        -moz-perspective-origin: 50% 100px;

        -ms-perspective: 800px;
        -ms-perspective-origin: 50% 100px;

        perspective: 800px;
        perspective-origin: 50% 100px;
    }

    .cube {
        position: relative;
        width: 200px;
        margin: 0 auto;

        -webkit-transform-style: preserve-3d;
        -webkit-animation: spin 5s infinite linear;

        -moz-transform-style: preserve-3d;
        -moz-animation: spin 5s infinite linear;

        -ms-transform-style: preserve-3d;
        -ms-animation: spin 5s infinite linear;

        transform-style: preserve-3d;
        animation: spin 5s infinite linear;
    }

    .cube div {
        position: absolute;
        width: 200px;
        height: 200px;
        background: rgba(255, 255, 255, 0.1);
        box-shadow: inset 0 0 30px rgba(125, 125, 125, 0.8);
        font-size: 20px;
        text-align: center;
        line-height: 200px;
        color: rgba(0, 0, 0, 0.5);
        font-family: sans-serif;
        text-transform: uppercase;
    }

    /*************** DEPTH CUBE ***************/
    .depth div.back-pane {
        -webkit-transform: translateZ(-100px) rotateY(180deg);
        -moz-transform: translateZ(-100px) rotateY(180deg);
        -ms-transform: translateZ(-100px) rotateY(180deg);

        transform: translateZ(-100px) rotateY(180deg);
    }

    .depth div.right-pane {
        -webkit-transform: rotateY(-270deg) translateX(100px);
        -webkit-transform-origin: top right;

        -moz-transform: rotateY(-270deg) translateX(100px);
        -moz-transform-origin: top right;

        -ms-transform: rotateY(-270deg) translateX(100px);
        -ms-transform-origin: top right;

        transform: rotateY(-270deg) translateX(100px);
        transform-origin: top right;
    }

    .depth div.left-pane {
        -webkit-transform: rotateY(270deg) translateX(-100px);
        -webkit-transform-origin: center left;

        -moz-transform: rotateY(270deg) translateX(-100px);
        -moz-transform-origin: center left;

        -ms-transform: rotateY(270deg) translateX(-100px);
        -ms-transform-origin: center left;

        transform: rotateY(270deg) translateX(-100px);
        transform-origin: center left;
    }

    .depth div.top-pane {
        -webkit-transform: rotateX(-90deg) translateY(-100px);
        -webkit-transform-origin: top center;

        -moz-transform: rotateX(-90deg) translateY(-100px);
        -moz-transform-origin: top center;

        -ms-transform: rotateX(-90deg) translateY(-100px);
        -ms-transform-origin: top center;

        transform: rotateX(-90deg) translateY(-100px);
        transform-origin: top center;
    }

    .depth div.bottom-pane {
        -webkit-transform: rotateX(90deg) translateY(100px);
        -webkit-transform-origin: bottom center;

        -moz-transform: rotateX(90deg) translateY(100px);
        -moz-transform-origin: bottom center;

        -ms-transform: rotateX(90deg) translateY(100px);
        -ms-transform-origin: bottom center;

        transform: rotateX(90deg) translateY(100px);
        transform-origin: bottom center;
    }

    .depth div.front-pane {
        -webkit-transform: translateZ(100px);
        -moz-transform: translateZ(100px);
        -ms-transform: translateZ(100px);

        transform: translateZ(100px);
    }

    /*************** VERTICAL SPINNING CUBE ***************/
    .cube-wrap.vertical .cube {
        -webkit-transform-origin: 0 100px;
        -moz-transform-origin: 0 100px;
        -ms-transform-origin: 0 100px;
        transform-origin: 0 100px;

        -webkit-animation: spin-vertical 5s infinite linear;
        -moz-animation: spin-vertical 5s infinite linear;
        -ms-animation: spin-vertical 5s infinite linear;
        animation: spin-vertical 5s infinite linear;
    }

    .cube-wrap.vertical .depth div.top-pane {
        -webkit-transform: rotateX(-270deg) translateY(-100px);
        -moz-transform: rotateX(-270deg) translateY(-100px);
        -ms-transform: rotateX(-270deg) translateY(-100px);

        transform: rotateX(-270deg) translateY(-100px);
    }

    .cube-wrap.vertical .depth div.back-pane {
        -webkit-transform: translateZ(-100px) rotateX(180deg);
        -moz-transform: translateZ(-100px) rotateX(180deg);
        -ms-transform: translateZ(-100px) rotateX(180deg);

        transform: translateZ(-100px) rotateX(180deg);
    }

    .cube-wrap.vertical .depth div.bottom-pane {
        -webkit-transform: rotateX(-90deg) translateY(100px);
        -moz-transform: rotateX(-90deg) translateY(100px);
        -ms-transform: rotateX(-90deg) translateY(100px);
        transform: rotateX(-90deg) translateY(100px);
    }

    /*************** FLAT SPINNING CUBE ***************/
    .cube-wrap.flat {
        -webkit-perspective: none;
        -webkit-perspective-origin: 0 0;

        -moz-perspective: none;
        -moz-perspective-origin: 0 0;

        -ms-perspective: none;
        -ms-perspective-origin: 0 0;

        perspective: none;
        perspective-origin: 0 0;
    }</style>
</head>
<body>
<div class="body-width">
    <div class="content-wrapper">
        <h2>横向旋转立方体</h2>
        <div style="height: 300px; margin-top: 40px;">
            <div class="cube-wrap">
                <div class="cube depth">
                    <div class="front-pane">前</div>
                    <div class="back-pane">后</div>
                    <div class="top-pane">上</div>
                    <div class="bottom-pane">bottom</div>
                    <div class="left-pane">左</div>
                    <div class="right-pane">右</div>
                </div>
            </div>
        </div>
        <h2>纵向旋转立方体</h2>
        <div style="height: 300px; margin-top: 60px;">
            <div class="cube-wrap vertical">
                <div class="cube depth">
                    <div class="front-pane">前</div>
                    <div class="back-pane">后</div>
                    <div class="top-pane">上</div>
                    <div class="bottom-pane">bottom</div>
                    <div class="left-pane">左</div>
                    <div class="right-pane">右</div>
                </div>
            </div>
        </div>
        <h2>水平旋转立方体</h2>
        <div style="height: 300px; margin-top: 60px;">
            <div class="cube-wrap flat">
                <div class="cube depth">
                    <div class="front-pane">前</div>
                    <div class="back-pane">后</div>
                    <div class="top-pane">上</div>
                    <div class="bottom-pane">bottom</div>
                    <div class="left-pane">左</div>
                    <div class="right-pane">右</div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>
